<template>
	<el-dialog
		ref="layout"
		title="Layout Setting"
		width="800px"
		:visible.sync="dialogVisible"
		@open="dialogOpen"
		@opened="dialogOpened"
	>
		<el-form :model="form" label-width="120" inline>
			<el-form-item label="row one">
				<el-input-number v-model="form.firstRow"  :min="1" :max="3"></el-input-number>
			</el-form-item>
			<el-form-item label="row two">
				<el-input-number v-model="form.secondRow"  :min="0" :max="3"></el-input-number>
			</el-form-item>
			<el-form-item label="show const panel">
				<el-switch v-model="form.constVisible"></el-switch>
			</el-form-item>
			<el-form-item label="show signal panel">
				<el-switch v-model="form.signalVisible"></el-switch>
			</el-form-item>
		</el-form>
		<div ref="container" class="layout-container-box" :style="styleObj">
			<el-row style="height: 100%">
				<el-col :span="24">
					<div class="header-panel">header</div>
				</el-col>
				<el-col :span="24" v-if="form.constVisible">
					<div class="const-panel">const panel</div>
				</el-col>
				<el-col class="graph-panel-container" :span="form.signalVisible ? 20 : 24">
					<div class="graph-panel">
						<el-row :gutter="5">
							<el-col v-for="(item, index) in Array(form.firstRow)" :span="24 / form.firstRow" :key='index'>
								<div class="graph-box" :style="graphStyle">graph</div>
							</el-col>
						</el-row>
						<el-row v-if="form.secondRow !== 0" style="margin-top: 5px" :gutter="5">
							<el-col v-for="(item, index) in Array(form.secondRow)" :span="24 / form.secondRow" :key='index'>
								<div class="graph-box" :style="graphStyle">graph</div>
							</el-col>
						</el-row>
					</div>
				</el-col>
				<el-col :span="4" v-if="form.signalVisible">
					<div class="signal-panel" :style="signalStyle">signal panel</div>
				</el-col>
			</el-row>
		</div>
		<div slot="footer" class="dialog-footer">
			<el-button @click="dialogVisible = false">Cancel</el-button>
			<el-button type="primary" @click="onSave">Save</el-button>
		</div>
	</el-dialog>
</template>

<script>
export default {
	name: 'LayoutDialog',
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		grid: {
			type: Array
		},
		constVisible: {
			type: Boolean,
			default: false
		},
		signalVisible: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			form: {
				firstRow: 1,
				secondRow: 0,
				constVisible: false,
				signalVisible: false
			},
			styleObj: {
				height: 0
			},
			graphStyle: {
				height: 0
			},
			signalStyle: {
				height: 0
			}
		}
	},
	computed: {
		dialogVisible: {
			get() {
				return this.visible;
			},
			set(val) {
				this.$emit("update:visible", val);
			}
		}
	},
	watch: {
		'form.secondRow'(val) {
			if (val !== 0) {
				const containerHeight = Math.round((this.$refs.container.clientWidth * 9) / 16)
				this.graphStyle.height = (containerHeight - 30 - (this.form.constVisible ? 30: 0) - 10 - 5) / 2  + "px"
			} else {
				const containerHeight = Math.round((this.$refs.container.clientWidth * 9) / 16)
				this.graphStyle.height = (containerHeight - 30 - (this.form.constVisible ? 30: 0)) / (this.form.secondRow === 0 ? 1 : 2) - 10 + "px"
			}
		},
		'form.constVisible'() {
			const containerHeight = Math.round((this.$refs.container.clientWidth * 9) / 16)
			this.styleObj.height = containerHeight + "px"
			if (this.form.secondRow !== 0) {
				this.graphStyle.height = (containerHeight - 30 - (this.form.constVisible ? 30: 0) - 10 - 5) / 2  + "px"
			} else {
				this.graphStyle.height = (containerHeight - 30 - (this.form.constVisible ? 30: 0)) / (this.form.secondRow === 0 ? 1 : 2) - 10 + "px"
			}
			this.signalStyle.height = containerHeight - 30 - (this.form.constVisible ? 30: 0) + "px"
		}
	},
	methods: {
		dialogOpen() {
			this.form.firstRow = this.grid[0] ? this.grid[0].length : 1
			this.form.secondRow = this.grid[1] ? this.grid[1].length : 0
			this.form.constVisible = this.constVisible
			this.form.signalVisible = this.signalVisible
		},
		onSave() {
			this.$emit('save', this.form)
			this.dialogVisible = false
		},
		dialogOpened() {
			const containerHeight = Math.round((this.$refs.container.clientWidth * 9) / 16)
			this.styleObj.height = containerHeight + "px"
			this.graphStyle.height = (containerHeight - 30 - (this.form.constVisible ? 30: 0)) / (this.form.secondRow === 0 ? 1 : 2) - 10 + "px"
			this.signalStyle.height = containerHeight - 30 - (this.form.constVisible ? 30: 0) + "px"
		}
	}
}
</script>

<style scoped lang="scss">
.layout-container-box{
	.el-row{
		.header-panel{
			height: 30px;
			background-color: #d3dce6;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.const-panel{
			background-color: #b3c0d1;
			height: 30px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.graph-panel-container{
			padding: 5px;
			background-color: #d3dce6;
			.graph-panel{
				height: 100%;
				.graph-box{
					background-color: #FFFFFF;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
		.signal-panel{
			background-color: #e9eef3;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}
</style>
